<template>
  <div class="vacate">
    <el-dialog :title="isVacate ? '请假' : '撤销请假'" :visible.sync="visible" @close="handleCancel">
      <el-row>
        <el-col :span="2">
          <div class="grid-content bg-purple">
            请假人:
          </div>
        </el-col>
        <el-col :span="22">
          <div class="grid-content bg-purple-light">
            {{studentInfo.name}}
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="isVacate ? 2 : 24" class="time-range">
          <div class="grid-content bg-purple">
            {{isVacate ? '请假时间:' : '请选择撤销请假的时间：'}}
          </div>
        </el-col>
        <el-col :span="22" v-if="isVacate">
          <div class="grid-content bg-purple-light">
            <el-date-picker v-model="date" type="daterange" placeholder="选择请假时间" :picker-options="pickerOptions" @change="handleDate" />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2" v-if="isVacate&&courseTime">
          <div class="grid-content bg-purple">
            请假课程:
          </div>
        </el-col>
        <el-col :span="isVacate ? 22 : 24">
          <div class="grid-content bg-purple-light" v-if="isVacate">
            <div class="course" v-if="isCourse&&courseTime">
              <el-scrollbar class="import_table" wrap-class="vacade-scroll">
                <el-checkbox-group v-model="checkList" class="time-list">
                  <el-checkbox v-for="item in train_student_vacate" :key="item.id" :label="item.id">
                    <span class="course-name">{{item.courseName}}</span>
                    <span>{{new Date(item.beginDate).format('yyyy.MM.dd')}} {{item.beginWeekCode | getWeekDay}} {{new Date(item.startTime).format('hh:mm')}}-{{new Date(item.endTime).format('hh:mm')}}</span>
                  </el-checkbox>
                </el-checkbox-group>
              </el-scrollbar>
            </div>
            <div v-else-if="!isCourse&&courseTime">
              暂无可请假的课程
            </div>
          </div>
          <div class="grid-content bg-purple-light" v-else>
            <el-scrollbar class="import_table" wrap-class="vacade-scroll">
              <el-checkbox-group v-model="checkList" class="time-list">
                <el-checkbox v-for="item in train_student_close_vacate" :key="item.id" :label="item.id">
                  {{new Date(item.beginDate).format('yyyy.MM.dd')}} {{item.beginWeekCode | getWeekDay}} {{new Date(item.startTime).format('hh:mm')}}-{{new Date(item.endTime).format('hh:mm')}}                
                </el-checkbox>
              </el-checkbox-group>
            </el-scrollbar>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :disabled="checkList.length==0">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import trainApi from 'api/train'
export default {
  props: {
    isVacate: {
      type: Boolean,
      default: true
    },
    studentInfo: {
      type: Object
    }
  },
  data () {
    return {
      visible: true,
      checkList: [],
      courseTime: false,
      isCourse: '', // 显示是否有课程
      date: '',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  created () {
    if (!this.isVacate) {
      this.$store.dispatch('train_student_close_vacate', {studentId: this.studentInfo.id})
    }
  },
  computed: {
    ...mapGetters({
      train_student_vacate: 'train_student_vacate',
      train_student_close_vacate: 'train_student_close_vacate'
    })
  },
  watch: {
    train_student_vacate (value) {
      if (value.length === 0) {
        this.courseTime = true
        this.isCourse = false
      } else {
        this.courseTime = true
        this.isCourse = true
      }
    }
  },
  methods: {
    handleDate (value) {
      if (!value) { // 时间不存在
        this.courseTime = false
        this.isCourse = false
      } else {
        this.$store.dispatch('train_student_vacate', {studentId: this.studentInfo.id, beginDate: new Date(this.date[0]).getTime(), endDate: new Date(this.date[1]).getTime()})
      }
    },
    handleCancel () {
      this.$emit('input', false)
    },
    handleSubmit () {
      if (this.isVacate) {
        trainApi.studentPutVacate(JSON.stringify(this.checkList), {context: this, successMsg: '请假成功'}).then(res => {
          this.$emit('success').$emit('input', false)
        })
      } else {
        trainApi.studentPutCloseVacate(JSON.stringify(this.checkList), {context: this, successMsg: '撤销请假成功'}).then(res => {
          this.$emit('success').$emit('input', false)
        })
      }
    }
  }
}
</script>

<style lang="scss">
  .vacate {
    .el-row {
      margin-bottom: 15px;
    }
    .time-range {
      line-height: 36px;
    }
    .el-dialog--small{
      width:850px;
    }
    .el-checkbox-group {
      .el-checkbox{
        width: 45%;
        margin-right: 3%;
        margin-bottom: 25px;
        .course-name {
          max-width: 130px;
          display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          vertical-align: top;
          font-size: 14px
        }
      }
    }
    .el-dialog__footer{
      text-align: center;
      padding-bottom:25px;
    }
    .vacade-scroll{
      max-height:330px;
      overflow-y: scroll;
    }
  }
</style>
